import * as echarts from 'echarts'

export default function barChart(data: any) {
  const options = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'axis',
      formatter: function (params: any) {
        let html = ''
        params.forEach((v: any) => {
          html += `<div style="color: #4f5e7b;font-size: 16px;line-height: 24px">
            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4f5e7b;"></span>
            ${v.name} / 
            <span style="color:#379cf7;font-weight:bold;font-size: 16px">${v.value}</span>
            件</div>`
        })

        return html
      },
    },
    grid: {
      top: '5%',
      left: '5%',
      right: '3%',
      bottom: '8%',
      // containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        color: '#59588D',
        axisLine: {
          show: true,
        },
        axisLabel: {
          color: '#282828',
        },
        splitLine: {
          // show: true
        },

        axisTick: {
          show: false,
        },
        // boundaryGap: true,
        data: data.map((item: any) => {
          return {
            ...item,
            value: item.yf,
          }
        }),
      },
    ],

    yAxis: [
      {
        type: 'value',
        min: 0,
        splitNumber: 4,
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          // margin: 20,
          textStyle: {
            color: '#737373',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(131,101,101,0.2)',
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: '#55aeff',
          },
        },
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#55aeff',
          },
        },

        itemStyle: {
          color: '#FFF',
          borderColor: '#55aeff',
          borderWidth: 2,
        },
        tooltip: {
          show: true,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(195,230,255,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(195,230,255,0.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(195,230,255,0.1)',
            shadowBlur: 20,
          },
        },
        data: data.map((item: any) => {
          return {
            ...item,
            value: item.sl,
          }
        }),
      },
    ],
  }
  return options
}
